<template>
  <div class="wrapper">
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!recommendList.length" />
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      :disabled="disabled">
      <common-scroll ref="scroll"
                     class="scroll"
                     :listenScroll="listenScroll"
                     @pullingUp="handlePullUp"
                     :data="recommendList"
                     @scrollend="handleScrollEnd">
        <div class="scroll-content">
          <home-swiper @loadImg="loadDataed"
                       :list="swiperList"></home-swiper>
          <home-icon :list="iconsList"></home-icon>
          <home-recommend :list="recommendList"></home-recommend>
          <load-more v-show="loadMore"
                     :title="loadMoreTitle"></load-more>
        </div>
      </common-scroll>
    </van-pull-refresh>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import commonScroll from 'common/scroll/scroll'
import HomeSwiper from './components/swiper'
import HomeIcon from './components/icon'
import HomeRecommend from './components/recommend'
import LoadMore from 'common/loadMore/loadmore'
export default {
  name: 'home',
  data () {
    return {
      swiperList: [], // 轮播
      iconsList: [], // icon
      recommendList: [], // recommend
      page: 1,
      loadMore: false, // 加载更多
      total: 0, // 推荐总条数
      loadMoreTitle: '加载中...',
      scrollHeight: 0, // 滚动高度
      isLoading: false,
      disabled: false // 是否可以下拉刷新
    }
  },
  components: {
    tabBar,
    commonScroll,
    HomeSwiper,
    HomeIcon,
    HomeRecommend,
    LoadMore
  },
  created () {
    this.listenScroll = true
    this.getSwiper()
    this.getIcon()
    this.recommend()
  },
  methods: {
    loadDataed () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    },
    getSwiper () {
      this.$api.home.swiper()
        .then(this.getSwiperSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getSwiperSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.swiperList = data.ads
      }
    },
    getIcon () {
      this.$api.home.classify()
        .then(this.getIconSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getIconSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.iconsList = data.category
      }
    },
    recommend () {
      const page = this.page
      this.$api.home.recommend({ page })
        .then(this.recommendSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    recommendSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.recommendList = this.recommendList.concat(...data.recom)
        this.total = data.total
        this.loadMore = false
        this.isLoading = false
        this.loadMoreTitle = '加载中...'
      }
    },
    // 上拉加载更多
    handlePullUp () {
      this.loadMore = true
      const flag = this.judge()
      if (flag) {
        this.page += 1
        this.recommend()
      } else {
        this.loadMoreTitle = '没有更多'
      }
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullUp()
    },
    // 判断总条数是否大于列表长度
    judge () {
      const total = this.total
      const length = this.recommendList.length
      return total > length
    },

    // 滚动事件
    handleScrollEnd (pos) {
      this.scrollHeight = -pos.y
    },
    // 下拉刷新
    onRefresh () {
      const _this = this
      const msg = '刷新成功'
      this.page = 1
      this.recommendList = []
      Promise.all([_this.getSwiper(), _this.getIcon(), _this.recommend()]).then((res) => {
        this.$tip(msg)
      }).catch((e) => {
        this.$errorTip()
        this.$nextTick(() => {
          this.isLoading = false
        })
      })
    }
  },
  watch: {
    scrollHeight (newY) {
      this.disabled = newY > 0
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .van-pull-refresh
  background-color $recommend_bgc

.wrapper >>> .van-pull-refresh__head
  font-size $shop_name

.wrapper >>> .van-pull-refresh__track
  width 100%
  height 100vh

.scroll
  box-sizing border-box
  bottom 110px
  background-color $recommend_bgc

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
